<template>
    <div class="card rdsp-card-view" data-page="waterSource">
        <div class="card-content rank-content card-content-padding alarmChange-card-content">
            <div class="rdsp-card-title">
                <div class="left-title">消防水源监测</div>
                <div class="rdsp-card-title-right">
                    <div class="right-con" style="float: left; margin-right: 16px;">
                        监测总数<span style="color: #378BF6; margin-left: 5px; font-size: 12px;" id="totzsDE">5</span>
                    </div>
                    <div class="right-con" style="float: left;">
                        警情<span style="color: #FE6668; margin-left: 5px; font-size: 12px;" id="totzsInfoDE">1</span>
                    </div>
                </div>
            </div>
            <div class="swiper-container" id="swiperMoveInfo">
                <div class="swiper-wrapper" id="showecart">
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" id="waterSource_page"></div>
            </div>
            <div id="showSingleDetailInfo"></div>
        </div>
    </div>
</template>

<style scoped>
    .tirInfo {
        font-size: 13px;
        color: #999999;
        margin-top: -10px;
        text-indent: 8px;
    }

    .seInfo {
        font-size: 50px;
    }

    .yeinnerInfo {
        text-align: left;
        margin-top: 58px;
    }

    .ywdetail {
        float: left;
        height: 100%;
        width: 42%;
    }

    .tankInfo {
        height: 100%;
        width: 47%;
        text-align: center;
        float: left;
        margin-left: 19px;
    }

    .detailInfo {
        color: #FFFFFF;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 20px;
        padding-left: 10px;
        height: 45px;
        line-height: 45px;
    }

    .watersourceInfo {
        height: 224px;
        background: rgba(244, 244, 244, 1);
        border-radius: 4px;
        margin-top: 9px;
    }

    .deteInfo {
        float: left;
        float: left;
        margin-top: -47px;
        height: 45px;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: relative;
        z-index: 9999;
    }

    .deteInfo a {
        height: 45px;
    }

    .swiper-container {
        padding-bottom: 20px;
    }

    .swiper-container-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: -5px;
    }

    .defaultnone-img {
        position: absolute;
        width: 80%;
        left: 9%;
        top: 30px;
    }

    #waterSource_page {
        width: 158px;
        left: 50%;
        margin-left: -79px;
        overflow: hidden;
        white-space: nowrap;
    }
</style>

<script>
    return {
        data: function () {
            return {}
        },
        methods: {
            getNumInfo: function () {
                $("#totzsDE").empty();
                $("#totzsInfoDE").empty();
                var id_org = "";
                if (single_Orgid == "") {
                    id_org = userInfor.organizationIds;
                } else {
                    id_org = single_Orgid;
                }
                Dao.getFcfRealTimeStatusMultiCount({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    fcfsType: 1,
                    orgIds: id_org
                }, function (data) {
                    $("#totzsDE").html(data.count);
                    $("#totzsInfoDE").html(data.fireAlarmCount);
                })

            },
            getwatersourceData: function () {
                var self = this;
                var now = new Date();
                var id_org = "";
                if (single_Orgid == "") {
                    id_org = userInfor.organizationIds;
                } else {
                    id_org = single_Orgid;
                }
                Dao.getFireResMonitorInfo({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    queryType: 1,
                    resType: 1,
                    orgIds: id_org,
                    pageIndex: 0,
                    pageSize: 9
                }, function (data) {
                    if (data.length < 2) {
                        $("#waterSource_page").hide();
                    }
                    if (data && data.length > 0) {
                        $("#showecart").empty();
                        for (var i = 0; i < data.length; i++) {
                            var showDat = "-";
                            var color = "#77be07";
                            if (data[i].analogInfo.length > 0) {
                                if (data[i].analogInfo[0].realTimeAnalogInfo) {
                                    if (data[i].analogInfo[0].realTimeAnalogInfo.analogValue != null) {
                                        showDat = data[i].analogInfo[0].realTimeAnalogInfo.analogValue;
                                    }
                                }
                            }
                            $("#showecart").append(`<div class="swiper-slide apply">
                					<div class="watersourceInfo">
                                       <div class="top-ban" id="waterSource` + data[i].id + `" style="height:224px;">
            						        <div class="tankInfo" id="trawTank` + data[i].id + `"></div>
                    						<div class="ywdetail" id="hideInfo` + data[i].id + `">
                    							<div class="yeinnerInfo" id="waterSource-yeinnerInfo` + data[i].id + `" >
                    								<div class="seInfo"  >
                    									` + showDat + `<span style="font-size: 24px">米</span>
                    								</div>
                    								<div class="tirInfo" >当前液位</div>
                    							</div>
                    						</div>
                                        </div>
                                        <div class="card-noAnalog" id="card-waterSource-noAnalog` + data[i].id + `">
                                           <div class="noAnalog-left">
                                           <img src="/ilink-app-h5-zd/static/img/rdspFile_1557407601520.png" />
                                           </div>
                                           <div class="noAnalog-right">
                                                <p class="noAnalog-right-text"></p>
                                                <span class="noAnalog-right-type">当前状态</span>
                                           </div>
                                        </div>
            						<div class="deteInfo">
            							<a href="/eqmentMsg/` + data[i].id + `/" class="item-link item-content" data-view=".view-main"><div class="detailInfo">
                                         ` + transFireIcon(data[i].fireTType) + data[i].name + `
                                        </div></a>
            						</div>
            					</div>
            				</div>`);
                            if (data[i].fireTType == 20) { //故障状态
                                $("#card-waterSource-noAnalog" + data[i].id).show();
                                $("#card-waterSource-top-ban" + data[i].id).hide();
                                $("#card-waterSource-noAnalog" + data[i].id).find(".noAnalog-right-text")
                                    .empty().html(transFireToText(data[i].fireTType)).css("color",
                                        transFireColor(data[i].fireTType));

                            } else {
                                $("#card-waterSource-noAnalog" + data[i].id).hide();
                                $("#card-waterSource-top-ban" + data[i].id).show();

                            }
                            if (data[i].analogInfo.length > 0) {
                                if (data[i].analogInfo[0].realTimeAnalogInfo) {
                                    var thresholdMax = data[i].analogInfo[0].thresholdMax;
                                    var thresholdMin = data[i].analogInfo[0].thresholdMin;
                                    var analogValue = data[i].analogInfo[0].realTimeAnalogInfo.analogValue;
                                    if (data[i].analogInfo[0].realTimeAnalogInfo.analogValue == 0) {
                                        thresholdMax = 0;
                                    }
                                    if (showDat <= data[i].analogInfo[0].thresholdMin || showDat >=
                                        thresholdMax) {
                                        color = "#fe6668"; //不正常
                                    } else {
                                        color = "#77be07"; //正常
                                    }
                                    $("#waterSource-yeinnerInfo" + data[i].id).css("color", color);
                                    self.drawWaterChart(analogValue, thresholdMax, data[i].id);
                                } else {
                                    $("#hideInfo" + data[i].id).empty();
                                    $("#trawTank" + data[i].id).parents(".watersourceInfo").append(
                                        `<img  src="` + listNoDataPic() + `" class="defaultnone-img">`);
                                }
                            } else {
                                $("#hideInfo" + data[i].id).hide();
                                $("#trawTank" + data[i].id).hide();
                                $("#waterSource" + data[i].id).append(
                                    `<div class="no-data-img"><img   src="` + listNoDataPic() +
                                    `"></div>`);
                            }

                        }
                    } else {
                        $("#showSingleDetailInfo").empty();
                        $("#showSingleDetailInfo").append(
                            `<div><img  style="width: 283px;display:block; margin-top: 12px;" src="` +
                            listNoDataPic() + `"></div>`);
                    }
                }, false);
            },
            drawWaterChart: function (top, bottom, id) {
                var waterTankChart1 = echarts.init(document.getElementById("trawTank" + id));
                var option = {
                    title: null,
                    tooltip: {},
                    xAxis3D: {
                        type: 'category',
                        data: ['']
                    },
                    yAxis3D: {
                        type: 'category',
                        data: ['']
                    },
                    zAxis3D: {
                        type: 'value'
                    },
                    grid3D: {
                        show: false, //是否显示三维迪卡尔坐标
                        boxWidth: 80,
                        boxDepth: 20,
                        axisPointer: {
                            show: false
                        },
                        viewControl: {
                            alpha: 15, //视角绕 x 轴，即上下旋转的角度(与beta一起控制视野成像效果)
                            beta: 60 //视角绕 y 轴，即左右旋转的角度
                        },
                        top: "-5%", //组件的视图离容器上侧的距离
                        left: "-20%",
                        bottom: "-10%"
                    },
                    series: [{
                        type: 'bar3D',
                        barSize: 75,
                        data: [
                            [0, 0, bottom]
                        ],
                        stack: 'stack',
                        shading: 'lambert',
                        itemStyle: { //柱条样式
                            color: '#428ceb',
                            opacity: 0.9
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        }
                    }, {
                        type: 'bar3D',
                        barSize: 75,
                        data: [
                            [0, 0, top]
                        ],
                        stack: 'stack',
                        shading: 'lambert',
                        itemStyle: { //柱条样式
                            color: '#428ceb',
                            opacity: 0.5
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        }
                    }]
                }
                waterTankChart1.setOption(option);
            }

        },
        on: {
            pageInit: function (e, page) {
                //inPage  sort 5 
                var self = this;
                /* self.drawWaterChart(0.56,0.94); */
                self.getwatersourceData();
                self.getNumInfo()
                var mySwiper = new Swiper('#swiperMoveInfo', {
                    autoplay: false, //可选选项，自动滑动
                    // 如果需要分页器 
                    pagination: {
                        el: '#waterSource_page',
                    },
                });
            },
            pageAfterIn: function (e, page) {
                //inPage  sort 7 
                //Do:进入页面后
                var self = this;
                /*   self.getwatersourceData(); */
                /*  self.drawWaterChart(0.56,0.94); */
            },
            pageBeforeOut: function (e, page) {
                //outPage  sort 0  
                //Do:离开页面前
            },
            pageBeforeRemove: function (e, page) {
                //outPage  sort 3  
                //Do：方法销毁、内存释放
            }
        }
    }
</script>